<template>
  <div id="hangye">
    <h2 class="title">行业</h2>
    <div class="hangye-container">
      <el-button @click="changeHangye('left')" :icon="ArrowLeft" circle size="large" color="none" />
      <div class="hangye-list">
        <ul ref="hangyeListContainer">
          <li v-for="(item, index) in hangyeList" :key="index" class="animate__animated"
            :class="thisHangye.id === item.id ? 'this-hangye' : ''" @click="changeHangye(index)">
            <el-icon>
              <component :is="item.icon"></component>
            </el-icon>
            <span>{{ item.name }}</span>
          </li>
        </ul>
        <span ref="thisHangyeBlock" class="this-hangye-block"></span>
      </div>
      <el-button @click="changeHangye('right')" :icon="ArrowRight" circle size="large" color="none" />
    </div>
  </div>
  <div class="about-hangye"
      :style="{
        backgroundImage: `url(${thisHangye.url})`,
        backgroundSize: 'cover',
        backgroundPosition: 'center',
      }"
  >
    <div class="bg-about-hangye">
      <div class="container-about-hangye">
        <el-icon>
          <component :is="thisHangye.icon"></component>
        </el-icon>
        <span>{{ thisHangye.name }}</span>
      </div>
      <p>
        {{ thisHangye.description }}
      </p>
      <el-button round color="none">
        了解更多 ->
      </el-button>
    </div>
  </div>
</template>
<script setup lang="ts">
  import {
    ArrowLeft,
    ArrowRight,
    Iphone,
    School,
    Bicycle,
    Monitor,
    Money,
    CreditCard,
    Van,
    Orange,
    Brush,
    SwitchButton,
    OfficeBuilding,
    MapLocation,
    Help,
  } from '@element-plus/icons-vue'
  import { markRaw, onMounted, ref, useTemplateRef, type Component, type ShallowRef } from 'vue'

  type HangyeItem = {
    id: number,
    icon: Component,
    name: string,
    msg: string,
    url: string,
    description: string,
    able: boolean
  }
  const hangyeList = ref<HangyeItem[]>([{
    id: 0,
    icon: markRaw(Iphone),
    name: '电信',
    msg: '电信行业',
    url: '/public/hangye/04184143jvji.jpg',
    description: '一直致力于IT软件服务，拥有从咨询、设计、开发、测试、运维到运营的端到端软件服务能力，在政府、金融、制造、交通、教育等各行业积累了丰富的IT案例与经验。通过与华为的长期战略合作，我们对ICT领域也有了全面的理解和支撑。',
    able: false
  }, {
    id: 1,
    icon: markRaw(School),
    name: '公共事业',
    msg: '公共事业行业',
    url: '/public/hangye/04184227ltfp.jpg',
    description: '公共事业关乎民生的方方面面，中软国际长期伴随中国的信息化进程和发展，多年来在电子政务、审计、社保、轨道交通、金融经济、支付结算等各个领域有着突出的贡献。曾参与6个 “十二金”工程（金审、金农、金质、金保、金宏、金卡）的信息化服务，服务超过20个中国政府部委级机构。',

    able: false

  }, {
    id: 2,
    icon: markRaw(Bicycle),
    name: '高科技',
    msg: '高科技行业',
    url: '/public/hangye/04184301t9cz.jpg',
    description: '中软国际深耕高科技行业，持续聚焦战略客户、积极面对行业挑战，为国内外知名高科技企业提供高附加值的软件及信息化服务，实现与客户共成长。同时，中软国际充分发挥全球交付能力优势，为欧美、亚太、大中华区客户提供全方位、标准化的ODC服务，帮助客户节省成本的同时，积极开拓海外市场。赢得了财富500强企业等大中型客户的长期合作和信赖，服务客户包括：微软、Oracle、IBM、腾讯、阿里巴巴、百度等。',

    able: false

  }, {
    id: 3,
    icon: markRaw(Monitor),
    name: '互联网',
    msg: '高科技行业',
    url: '/public/hangye/banner_hlw.jpg',
    description: '中软国际深耕互联网行业，持续聚焦战略客户、积极面对行业挑战，为国内外知名互联网企业提供高附加值的软件及信息化服务，实现与客户共成长。在线上营销、裂变式传播及营销、电商平台、微电商平台、会员管理、用户交互设计、营销资源整合等方面，有着成熟的方案体系，帮助客户实现数字化精准营销、提升用户粘度。',

    able: false

  }, {
    id: 4,
    icon: markRaw(Money),
    name: '金融',
    msg: '高科技行业',
    url: '/public/hangye/04190429pk8z.jpg',
    description: '中软国际顺应银行业的发展趋势，在传统支付清算、授信融资、卡基业务的优势基础上，在互联网金融、移动支付、风险管理、大数据应用、决策平台、分布式微服务架构上加大产品创新，完成了多个灯塔项目。针对市场热点和客户需求，进行的产品的设计研发，多年来累计获得各项软件著作权192项、产品登记证书150项；通过优质的产品和良好的服务，为广大金融客户提供业务发展所需的应用方案和系统建设。',

    able: false

  }, {
    id: 5,
    icon: markRaw(CreditCard),
    name: '数字化金融',
    msg: '高科技行业',
    url: '/public/hangye/04184334djq7.png',
    description: '中软国际数字化金融服务，采用多种先进技术、创新理念，能为客户打造更加贴近消费者习惯和体验的一站式智能银行终端。基于云计算平台，运用大数据技术，为客户提供更高效、更快速、更实惠的软件服务技术架构体系，如系统预警，安全预警，系统性能自动分析，银行客户行为分析，产品运营分析等一系列大数据服务；采用生物识别等技术，为客户提供更加安全可靠的数字银行产品。目前，中软国际数字化金融服务团队已成功地为HSBC在中国大陆、中国香港、英国、美国等全球100多个国家的汇丰银行提供金融软件服务，为客户实现专业、安全、便捷的财富管理和消费平台。',

    able: false

  }, {
    id: 6,
    icon: markRaw(Van),
    name: '流通',
    msg: '高科技行业',
    url: '/public/hangye/22173623ve50.jpg',
    description: '中软国际在流通领域通过多年发展和不断沉淀，积累了咨询规划、解决方案、提交实施和运行保障的丰富经验和服务能力，覆盖物流管理、物联网追溯管理、移动应用管理和应用集成管理等多个业务方向。',

    able: false

  }, {
    id: 7,
    icon: markRaw(Orange),
    name: '能源',
    msg: '高科技行业',
    url: '/public/hangye/041844106llo.jpg',
    description: '中软国际自主研发的具有自主知识产权的电力营销管理系统，充分借鉴了国家电网、SAP等业界先进的建设经验，采用微服务架构，组件式开发，可适用于完整的电力营销业务场景、离线预付费场景、电力云应用场景等。',

    able: false

  }, {
    id: 8,
    icon: markRaw(Brush),
    name: '制造',
    msg: '高科技行业',
    url: '/public/hangye/banner_znzz.jpg',
    description: '中软国际基于咨询、技术服务、运维服务的“端到端”的业务布局，逐步将已形成的完善、可持续发展的制造IT服务体系向制造工业智慧服务体系升级，通过形成覆盖工业企业智能制造主要业务模块的服务能力，支撑工业企业智慧环境打造和“互联网+工业”智慧蓝图建设。',

    able: false

  }, {
    id: 9,
    icon: markRaw(SwitchButton),
    name: '智能制造',
    msg: '高科技行业',
    url: '/public/hangye/22200314o2iz.jpg',
    description: '“蜂巢”工业互联网使能平台（Honeycomb）是面向“中国制造2025”，助力制造业两化深度融合和转型升级的普适性工业互联网使能平台。该平台基于工业APP和工业互联网资源而搭建，为制造企业提供转型升级整体解决方案，以及数字共享经济增值服务。',

    able: false

  },
  {
    id: 10,
    icon: markRaw(OfficeBuilding),
    name: '政府',
    msg: '高科技行业',
    url: '/public/hangye/04184519h8ta.jpg',
    description: '随着信息技术的不断发展，国家不断出台新的政策，以推进政府信息化建设。中软国际与中国的政府信息化建设共同成长，多年来在电子政务、民生安全、交通运输、文化传媒、审计与监督等各个领域有着突出的贡献。曾参与六个 “十二金”工程（金审、金农、金质、金保、金宏、金卡）的信息化建设，服务超过20个政府部委级机构，拥有丰富的政府信息化服务经验。',

    able: false

  }, {
    id: 11,
    icon: markRaw(MapLocation),
    name: '云集',
    msg: '高科技行业',
    url: '/public/hangye/04190558yxuf.jpg',
    description: '城市云集——“互联网+软件交易服务平台”，旨在“花最短的时间，找最合适的公司，保证项目按时完工”——以“公开、公平、公正”为原则，基于中软国际在软件信息产业的能力沉淀及技术优势，依托解放号链接的广泛软件供应商，结合行业项目管理最佳实践及项目核心成员的有效管理方法，实现政府信息化项目建设全生命周期数字化、集约化管理，打造覆盖政府信息化项目建设全过程的服务平台。',

    able: false

  }, {
    id: 12,
    icon: markRaw(Help),
    name: '鸿联',
    msg: '高科技行业',
    url: '/public/hangye/041903492bv5.jpg',
    description: '鸿联联创营是中软国际打造的自主智联网创新平台，致力于建设泛在有序感知城市，构建自主创新智联网生态体系，协力自主创新智能产业。鸿联联创营建设以开源鸿蒙（OpenHarmony）为代表的区域国产化AIoT生态服务平台，构建出一个市场化服务与公共服务双轮驱动的自主创新AIoT生态。推动数字化智能化发展，共同助力地方产业国产化智能化升级转型，推动地方政府聚集生态企业、培育产业生态、打造区域、行业应用示范，促进区域企业实现智能化改造升级。',
    able: false
  }
  ])

  const hangyeListContainer = useTemplateRef('hangyeListContainer') as ShallowRef<HTMLUListElement>
  const thisHangyeBlock = useTemplateRef('thisHangyeBlock') as ShallowRef<HTMLElement>

  const thisHangye = ref(hangyeList.value[0])

  // 控制 选中的 li
  const changeHangye = (index: number | 'left' | 'right') => {

    const thisIndex = thisHangye.value.id

    // ul
    const thisUlClientWidth = hangyeListContainer.value.clientWidth // 可视 ul 宽度
    const thisUlScrollWidth = hangyeListContainer.value.scrollWidth // 总 ul 宽度
    const thisUlScrollLeft = hangyeListContainer.value.scrollLeft // 左侧滚动距离

    // block
    const thisBlockLeft = thisHangyeBlock.value.offsetLeft  // block 左侧距离
    const thisBlockClientWidth = (thisHangyeBlock.value as HTMLElement).clientWidth // block 宽度

    const isAtULRightBottom = Math.abs(thisUlScrollWidth - (thisUlScrollLeft + thisUlClientWidth)) <= 1
    const isAtULLeftBottom = thisUlScrollLeft == 0


    // 在左侧
    const isUlLeft = (thisBlockLeft + thisBlockClientWidth / 2) <= thisUlClientWidth / 2
    // 在右侧
    const isUlRight = (thisBlockLeft + thisBlockClientWidth / 2) >= thisUlClientWidth / 2
    // 谁滚动
    // 居中 滚 ul
    // 不居中 滚 block
    // 触底
    // 不触底

    function getScrollId(index: number | 'left' | 'right') {
      if (index === 'left') {
        if (thisIndex === 0) {
          return thisIndex
        } else {
          return thisIndex - 1
        }
      } else if (index === 'right') {
        if (thisIndex === hangyeList.value.length - 1) {
          return thisIndex
        } else {
          return thisIndex + 1
        }
      } else {
        return index
      }
    }

    const scrollId = getScrollId(index)
    if (scrollId < thisIndex) {
      if (isAtULLeftBottom) {
        thisBlockScrollHandler(scrollId)
      } else {
        if (isUlLeft) {
          hangyeListContainerHandler(scrollId)
        } else {
          thisBlockScrollHandler(scrollId)
        }
      }
    } else if (scrollId > thisIndex) {
      if (isAtULRightBottom) {
        thisBlockScrollHandler(scrollId)
      } else {
        if (isUlRight) {
          hangyeListContainerHandler(scrollId)
        } else {
          thisBlockScrollHandler(scrollId)
        }
      }
    }
    thisHangye.value = hangyeList.value[scrollId]
  }

  // ul 滚动方法

  function hangyeListContainerHandler(lr: number) {
    const offsetWidth = (thisHangyeBlock.value as HTMLElement).offsetWidth;
    const thisId = thisHangye.value.id
    const scrollWidth = (lr - thisId) * offsetWidth
    hangyeListContainer.value?.scrollBy({
      left: scrollWidth,
      behavior: 'smooth'
    });
  }

  // block 移动方法
  function thisBlockScrollHandler(lr: number) {
    const lis = hangyeListContainer.value.querySelectorAll('li')
    const scrollLeft = hangyeListContainer.value.scrollLeft
    thisHangyeBlock.value.style.left = `${lis[lr].offsetLeft - scrollLeft}px`
  }
  // 更新 thishangye block 位置
  const obverse = new ResizeObserver(() => {
    // 监听 ul 宽度变化
    thisBlockScrollHandler(thisHangye.value.id)
  })
  onMounted(() => {
    thisBlockScrollHandler(0)
    obverse.observe(hangyeListContainer.value)
  })
</script>
<style scoped>
  #hangye {
    width: 80%;
    margin: 0 auto;
    position: relative;
    z-index: 2;

    .title {
      text-align: center;
      margin: 20px 0;
      letter-spacing: 20px;
    }

    .hangye-container {
      display: flex;
      gap: 10px;
      justify-content: space-between;
      align-items: center;
      flex-wrap: nowrap;


      .el-button {
        color: #733;
        &:hover {
          color: #ddd;
          background-color: #733;
        }
      }

      .hangye-list {
        --li-width: max(80px, 6vw);

        position: relative;
        min-width: 100px;
        box-shadow: var(--box-shadow);


        .this-hangye-block {
          transition: all 0.3s ease-in-out;
          position: absolute;
          top: 0;
          width: var(--li-width);
          height: var(--li-width);

          z-index: -1;
          background-color: #733;

          &::after {
            transition: all 0.3s ease-in-out;
            content: "";
            position: absolute;
            bottom: -24px;
            left: 50%;
            translate: -50%;
            width: 24px;
            height: 24px;
            background-color: #733;
            z-index: -1;
            clip-path: path("M 0 0 L 12 12 L 24 0 Z");
          }
        }

        ul {
          position: absolute;
          height: var(--li-width);

          display: grid;
          grid-template-columns: repeat(13, var(--li-width));
          grid-auto-rows: var(--li-width);

          overflow-x: auto;
          scrollbar-width: none;
          scroll-margin: 0;
          position: relative;

          .this-hangye {
            transition: all 0.3s ease-in-out;
            color: #ddd;
          }

          li {
            cursor: pointer;
            display: flex;
            flex-direction: column;
            text-align: center;
            justify-content: center;
            align-items: center;
            gap: 6px;
            position: relative;

            .el-icon {
              font-size: 24px;
            }

            span {
              white-space: nowrap;
            }
          }

        }


      }
    }

  }


  .about-hangye {
    color: aliceblue;

    position: relative;
    height: 300px;

    .bg-about-hangye{
      width: 80%;
      height: 100%;
      margin: 0 auto;
      text-align: center;

      padding: 40px 0;
    }

    .container-about-hangye {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;

      .el-icon {
        font-size: 32px;
      }

      >span {
        font-size: 24px;
        margin: 0 10px;
        line-height: 24px;
      }
    }

    p {
      text-align: justify;
      margin: 20px 0;
    }

    .el-button {
      position: absolute;
      bottom: 40px;
      left: 50%;
      transform: translateX(-50%);
    }
  }
</style>
